<template>
  <el-dialog
    :title="state.info.id ? '更新活动' : '创建活动'"
    v-model="state.visible"
    @close="handleClose"
  >
    <el-form :model="state.info" ref="formRef" label-width="120px">
      <el-form-item label="活动名称" prop="info.title">
        <!--<el-input type="text" v-model="state.info.title"></el-input>-->
        <el-select
          v-model="state.info.title"
          filterable
          remote
          reserve-keyword
          placeholder="关键词搜索，选择门店"
          :remote-method="remoteMethod"
          :loading="select.loading"
          style="width: 640px;"
          @change="remoteSelected">
          <el-option v-for="item in select.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="活动图片" prop="info.master">
        <el-upload class="avatar-uploader"
          :action="uploadServer"
          accept="jpg,jpeg,png"
          :headers="{ Authorization: local.get('ADMIN.TOKEN') }"
          :show-file-list="false"
          :before-upload="beupload"
          :on-success="uploader">
          <img v-if="state.info.master" class="avatar" alt=""
            :src="state.info.master"
            style="width: 300px; height: 210px; border: 1px solid #e9e9e9;">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="活动地址" prop="info.address">
        <el-input type="text" v-model="state.info.address"></el-input>
      </el-form-item>

      <el-form-item label="活动进展" prop="info.address">
        <el-radio-group v-model="state.info.status">
          <el-radio :label="10">待开放</el-radio>
          <el-radio :label="20">进行中</el-radio>
          <el-radio :label="30">已结束</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineExpose, defineProps, reactive, ref } from 'vue'
import { hasEmoji, uploadServer } from '../utils'
import { local } from '../utils/storage'
import { beupload, successful } from '../utils/upload'
import { ElMessage } from 'element-plus'
import { AdminShopList } from "../api/server/shop";
import { AdminMakerActivityInfo, AdminMakerActivityPost, AdminMakerActivityPut } from "../api/server/maker/activity";

const props = defineProps({
  reload: Function
})

const formRef = ref(null)
const info = ref({ shopid: 0, title: '', master: '', address: '', status: 10, })
const state = reactive({ visible: false, info: {} })
const select = reactive({
  list: [], // 数据源
  loading: true,
  options: [], // 下拉显示项
  value: ''
})

const remoteMethod = (query) => {
  if (!query) select.options.value = []
  state.info.title = query
  select.loading = true
  AdminShopList({ shopname: state.info.title, limit: 99 }).then(({ data }) => {
    select.list = data
    select.options = data.map(item => {
      return { label: item.shopname, value: item.id }
    })
    select.loading = false
  })
}
const remoteSelected = (val) => {
  const { id, shopname, shoplogo, city, address } = select.list.find(item => item.id === val)
  state.info.shopid = id
  state.info.title = shopname
  state.info.master = shoplogo
  state.info.address = [city, address].toString()
}

// 开启弹窗
const open = (id) => {
  state.visible = true

  if (id) {
    AdminMakerActivityInfo(id).then(({ data }) => state.info = data)
  } else {
    state.info = JSON.parse(JSON.stringify(info.value))
  }
  // 初始化门店下拉数据
  remoteMethod()
}

const uploader = (response, file) => state.info.master = successful(response, file)
// 关闭弹窗
const handleClose = () => formRef.value.resetFields()
const submitForm = () => {
  if (!state.info.shopid) {
    ElMessage.error('活动名称，请选择下拉数据')
    return
  }

  formRef.value.validate(async (valid) => {
    if (valid) {
      if (hasEmoji(state.info.title)) {
        ElMessage.error('分类名称中包含表情符号')
        return
      }
      if (state.info.title.length > 16) {
        ElMessage.error('分类名称不能超过16个字符')
        return
      }

      if (!state.info.id) {
        await AdminMakerActivityPost(state.info)
        ElMessage.success('添加成功')
      } else {
        await AdminMakerActivityPut(state.info.id, state.info)
        ElMessage.success('更新成功')
      }
      state.visible = false
      if (props.reload) props.reload()
    }
  })
}

defineExpose({ open })
</script>

<style scoped>
.avatar-uploader {
  color: #ddd;
  font-size: 30px;
}

.avatar-uploader-icon {
  display: block;
  width: 300px;
  height: 130px;
  line-height: 130px;
  border: 1px solid #e9e9e9;
  border-radius: 5px;
  padding: 32px 17px;
}

</style>
